<template>
	<view class="selector-container">
		<view 
			class="select-box" 
			v-for="(item, index) in select_arr" 
			:key="index" 
			:class="selectValue === index ? 'selected' : ''" 
			@click="user_select(index)"
		>
			<uni-badge size="normal" :text="item.selectNumber" absolute="rightTop" type="error" class="notification-badge">
				<text class="date-text">{{item.businessDate + ' ' + item.weekday + '   ' + item.matchNumber + '场比赛'}}</text>
			</uni-badge>
		</view>
	</view>
</template>

<script>
export default {
  props: {
    select_arr: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      selectValue: 0 // 当前选择的索引
    };
  },
  methods: {
    user_select(index) {
      if (this.selectValue !== index) {
        this.selectValue = index;
        this.$emit('click_select', this.selectValue);
      }
    }
  }
};
</script>

<style lang="scss">

	
	.selector-container {
		padding: 16rpx;
	}
	
	.select-box {
		border-radius: 16rpx;
		padding: 24rpx 28rpx;
		margin: 12rpx 0;
		background-color: rgba(255, 255, 255, 0.9);
		color: #333;
		text-align: left;
		transition: all 0.25s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		cursor: pointer;
		
		&:hover {
			background-color: white;
			transform: translateY(-2rpx);
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		}
		
		// 选中状态使用稍深的红色，与背景色#ff4242形成和谐对比
		&.selected {
			background-color: #e03a37;
			color: white;
			box-shadow: 0 4rpx 12rpx rgba(224, 58, 55, 0.3);
			
			&:hover {
				background-color: #c72c29;
				transform: translateY(0);
			}
		}
	}
	
	.date-text {
		font-size: 32rpx;
		font-weight: 500;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.match-count {
		font-size: 26rpx;
		opacity: 0.9;
	}
	
	.notification-badge {
		transform: translate(10rpx, -10rpx);
		// 调整徽章颜色与选中状态协调
		--uni-badge-error-color: #ffffff;
		--uni-badge-error-bg-color: #ff6b6b;
	}
</style>
